<template>
	<div 
  class="bgimg login-register">
		<div class="contain shadow-xl">
			<div class="big-box noscroll overflow-auto" :class="{active:isLogin}">
        <loginMain :isLogin="isLogin" @change="isLogin = !isLogin" />
			</div>
			<div class="opacity-95 small-box" :class="{active:isLogin}">
				<div class="small-contain" v-if="isLogin">
					<div class="stitle">你好，朋友!</div>
					<p class="scontent flex">
            开始注册，fly起来
            <svg t="1646914713644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2524" width="16" height="16"><path d="M905.728 131.584c11.776 12.288 29.696 36.864 28.672 76.288-1.536 76.288-71.168 178.176-207.872 303.616l9.216 258.56s4.096 73.216-14.848 116.224c-18.944 43.52-39.936 84.48-49.152 87.04-4.608 1.536-9.728 0-14.336-4.608-3.072-3.072-6.144-7.68-8.192-13.824 0 0-91.648-259.072-103.936-294.912C368.64 784.384 306.176 756.224 293.888 747.52c-1.024-0.512-2.048-1.536-2.56-2.048l-6.656-6.656c-1.024-1.024-1.536-1.536-2.048-2.56-8.704-12.8-37.376-75.264 88.576-252.928C332.288 469.504 71.68 377.344 71.68 377.344c-6.144-2.56-10.752-5.12-13.824-8.192-5.12-5.632-6.656-10.752-5.12-15.36 2.56-8.704 43.52-30.208 87.04-49.152 43.52-18.944 116.224-14.848 116.224-14.848l265.216 9.216c123.904-134.144 224.768-202.752 300.544-204.288 39.936-0.512 64 16.896 76.288 28.672l0.512 0.512c1.536 1.024 2.56 2.56 3.584 3.584 1.024 1.024 2.048 2.56 3.584 4.096z m-12.288 75.776c0.512-24.576-9.728-38.912-17.92-47.616l-1.024-1.024-3.584-3.584-1.024-1.024c-8.704-8.192-23.04-17.92-47.616-17.92-46.592 1.024-134.656 38.4-290.304 211.968C296.96 610.304 312.32 699.904 315.904 712.192l1.536 1.536c11.776 3.584 101.888 18.944 364.032-216.064 173.568-155.648 210.944-243.712 211.968-290.304z m-209.92 662.528c10.752-25.088 12.8-73.216 11.264-97.792v-1.024l-7.68-224.256c-39.936 34.816-75.776 64-108.032 88.576 1.536 2.56 3.072 5.12 4.096 7.68l89.088 252.928c3.072-7.68 7.168-16.384 11.264-26.112zM485.376 338.944l-230.912-8.192h-1.024c-24.576-1.536-72.704 0.512-97.792 11.264-8.704 4.096-17.408 7.68-26.112 11.776l252.928 89.088c4.608 1.536 8.192 4.096 11.776 6.656 25.6-32.768 55.296-69.632 91.136-110.592z" fill="#F42A90" p-id="2525"></path><path d="M875.52 159.744c8.192 8.704 17.92 23.04 17.92 47.616-1.024 46.592-38.4 134.656-211.968 290.304C419.328 732.16 329.216 716.8 317.44 713.216l-1.536-1.536c-3.584-11.776-18.432-101.888 216.064-364.032 155.648-173.568 243.712-210.944 290.304-211.968 24.576-0.512 38.912 9.728 47.616 17.92l1.024 1.024 3.584 3.584 1.024 1.536z m-180.736 612.352c1.536 24.576-0.512 72.704-11.264 97.792-4.096 8.704-7.68 17.408-11.776 26.112l-89.088-252.928c-1.024-2.56-2.56-5.12-4.096-7.68 32.768-24.576 68.608-53.76 108.032-88.576l7.68 224.256c0.512 0.512 0.512 1.024 0.512 1.024z m-440.32-440.832l230.912 8.192c-35.84 40.96-66.048 77.824-91.136 111.104-3.584-2.56-7.68-5.632-11.776-6.656L130.048 353.792c7.68-3.584 16.384-7.68 26.112-11.776 25.088-10.752 73.216-12.8 97.792-11.264 0 0 0 0.512 0.512 0.512z m225.792 409.6c15.872 15.872-20.992 92.672-36.864 127.488-4.608 9.728-12.8 18.944-21.504 23.04-22.016 10.752-62.976 27.648-80.384 10.24-2.56-3.072-5.12-6.656-6.144-11.776l-24.064-103.936s64.512-4.096 144.384-42.496c12.8-6.656 20.48-6.656 24.576-2.56z m-71.68 104.448c8.192-17.92 15.36-33.28 20.48-46.592-22.016 8.192-45.056 14.848-68.096 20.48l10.752 47.616c6.656-1.536 17.408-5.12 31.232-11.776 1.024-0.512 2.56-2.56 3.072-3.584l2.56-6.144z" fill="#F42A90" p-id="2526"></path><path d="M429.056 798.72c-5.12 12.8-12.288 28.672-20.48 46.592l-2.56 5.632c-0.512 1.536-2.048 3.072-3.072 3.584-13.824 6.656-24.064 10.24-31.232 11.776l-10.752-47.616c23.04-5.12 46.08-11.776 68.096-19.968z m-143.872-253.44c4.096 4.096 4.096 11.776-2.048 24.576-38.912 79.872-42.496 144.384-42.496 144.384l-103.936-24.064c-5.12-1.536-9.216-3.584-11.776-6.656-16.896-16.896-0.512-58.368 10.24-79.872 4.096-8.192 13.312-16.896 23.04-21.504 34.304-15.36 111.104-52.736 126.976-36.864z m-78.336 119.296c5.12-23.04 11.776-46.08 20.48-68.096-12.8 5.12-28.672 12.288-46.592 20.48l-5.632 2.56c-1.536 0.512-3.072 2.048-3.584 3.072-6.656 13.824-10.24 24.064-11.776 31.232-0.512 0 47.104 10.752 47.104 10.752z" fill="#F42A90" p-id="2527"></path><path d="M226.816 596.48c-8.192 22.016-14.848 45.056-20.48 68.096l-47.616-10.752c1.536-6.656 5.12-17.408 11.776-31.232 0.512-1.024 2.56-2.56 3.584-3.072l5.632-2.56c18.944-8.192 34.304-14.848 47.104-20.48z" fill="#93BEE1" p-id="2528"></path><path d="M940.544 108.032c11.776 12.288 29.696 36.864 28.672 76.288-1.536 76.288-71.168 178.176-207.872 303.616l9.216 258.56s4.096 73.216-14.848 116.224c-18.944 43.52-39.936 84.48-49.152 87.04-4.608 1.536-9.728 0-14.336-4.608-3.072-3.072-6.144-7.68-8.192-13.824 0 0-91.648-259.072-103.936-294.912-176.64 124.416-239.104 96.256-251.392 87.552-1.024-0.512-2.048-1.536-2.56-2.048l-6.656-6.656c-1.024-1.024-1.536-1.536-2.048-2.56-8.704-12.8-37.376-75.264 88.576-252.928C367.104 445.44 105.984 353.28 105.984 353.28c-6.144-2.56-10.752-5.12-13.824-8.192-4.608-4.608-5.632-9.728-4.608-14.336 2.56-8.704 43.52-30.208 87.04-49.152 43.52-18.944 116.224-14.848 116.224-14.848l265.216 9.216c123.904-134.144 224.768-202.752 300.544-204.288 39.936-0.512 64 16.896 76.288 28.672l0.512 0.512c1.536 1.024 2.56 2.56 3.584 3.584l3.584 3.584z m-11.776 75.776c0.512-24.576-9.728-38.912-17.92-47.616l-1.024-1.024-3.584-3.584-1.024-1.024c-8.704-8.192-23.04-17.92-47.616-17.92-46.592 1.024-134.656 38.4-290.304 211.968-235.008 262.144-219.648 351.744-216.064 364.032l1.536 1.536c11.776 3.584 101.888 18.944 364.032-216.064 173.056-155.648 210.944-243.712 211.968-290.304z m-209.92 663.04c10.752-25.088 12.8-73.216 11.264-97.792v-1.024l-7.68-224.256c-39.936 34.816-75.776 64-108.032 88.576 1.536 2.56 3.072 5.12 4.096 7.68l89.088 252.928c3.072-9.216 7.168-17.92 11.264-26.112zM520.704 315.904l-230.912-8.192h-1.024c-24.576-1.536-72.704 0.512-97.792 11.264-8.704 4.096-17.408 7.68-26.112 11.776L417.792 419.84c4.608 1.536 8.192 4.096 11.776 6.656 25.088-33.28 55.296-70.144 91.136-110.592z" fill="#5917C1" p-id="2529"></path><path d="M910.848 136.192c8.192 8.704 17.92 23.04 17.92 47.616-1.024 46.592-38.4 134.656-211.968 290.304-262.144 235.008-351.744 219.648-364.032 216.064l-1.536-1.536c-3.584-11.776-18.432-101.888 216.064-364.032 155.648-173.568 243.712-210.944 290.304-211.968 24.576-0.512 38.912 9.728 47.616 17.92l1.024 1.024 3.584 3.584 1.024 1.024z m-180.736 612.864c1.536 24.576-0.512 72.704-11.264 97.792-4.096 8.704-7.68 17.408-11.776 26.112L617.984 619.52c-1.024-2.56-2.56-5.12-4.096-7.68 32.768-24.576 68.608-53.76 108.032-88.576l7.68 224.256c0 0.512 0.512 1.024 0.512 1.536z m-440.32-441.344l230.912 8.192c-35.84 40.96-66.048 77.824-91.136 111.104-3.584-2.56-7.68-5.632-11.776-6.656L164.864 330.752c7.68-3.584 16.384-7.68 26.112-11.776 25.088-10.752 73.216-12.8 97.792-11.264h1.024z" fill="#FFFFFF" p-id="2530"></path><path d="M515.584 717.312c15.872 15.872-20.992 92.672-36.864 127.488-4.608 9.728-12.8 18.944-21.504 23.04-22.016 10.752-62.976 27.648-80.384 10.24-2.56-3.072-5.12-6.656-6.144-11.776l-24.064-103.936s64.512-4.096 144.384-42.496c12.288-6.656 20.48-6.656 24.576-2.56z m-71.68 104.448c8.192-17.92 15.36-33.28 20.48-46.592-22.016 8.192-45.056 14.848-68.096 20.48l10.752 47.616c6.656-1.536 17.408-5.12 31.232-11.776 1.024-0.512 2.56-2.56 3.072-3.584l2.56-6.144z" fill="#0CD8ED" p-id="2531"></path><path d="M464.384 775.168c-5.12 12.8-12.288 28.672-20.48 46.592l-2.56 5.632c-0.512 1.536-2.048 3.072-3.072 3.584-13.824 6.656-24.064 10.24-31.232 11.776l-10.752-47.616c23.04-4.608 45.568-11.264 68.096-19.968z" fill="#FFFFFF" p-id="2532"></path><path d="M320 522.24c4.096 4.096 4.096 11.776-2.048 24.576-38.912 79.872-42.496 144.384-42.496 144.384l-103.936-24.064c-5.12-1.536-9.216-3.584-11.776-6.656-16.896-16.896-0.512-58.368 10.24-79.872 4.096-8.192 13.312-16.896 23.04-21.504 34.304-15.872 111.616-52.736 126.976-36.864z m-78.336 119.296c5.12-23.04 11.776-46.08 20.48-68.096-12.8 5.12-28.672 12.288-46.592 20.48l-5.632 2.56c-1.536 0.512-3.072 2.048-3.584 3.072-6.656 13.824-10.24 24.064-11.776 31.232 0-0.512 47.104 10.752 47.104 10.752z" fill="#0CD8ED" p-id="2533"></path><path d="M262.144 573.44c-8.192 22.016-14.848 45.056-20.48 68.096l-47.616-10.752c1.536-6.656 5.12-17.408 11.776-31.232 0.512-1.024 2.56-2.56 3.584-3.072l5.632-2.56c18.432-8.704 34.304-15.36 47.104-20.48z" fill="#FFFFFF" p-id="2534"></path></svg>
          </p>
					<button class="sbutton" @click="isLogin = !isLogin">注册</button>
				</div>
				<div class="small-contain" v-else>
					<div class="stitle">欢迎回来!</div>
					<p class="scontent">ohoho，已经有账户了？请登录你的账户</p>
					<button class="sbutton" @click="isLogin = !isLogin">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { doLog,doReg } from '@/api/userApi.js'
import loginMain from './modules/loginMain'
export default{
	name:'login-register',
  components:{loginMain},
	data(){
		return {
			isLogin:true,
		}
	},
	methods:{
	}
}
</script>

<style scoped="scoped" lang="scss">
.bgimg{
    background: linear-gradient(288deg, #FFB6B9 0%, #FFB6B9 35%, #FAE3D9 calc(35% + 1px), #FAE3D9 45%, #BBDED6 calc(45% + 1px), #BBDED6 65%, #61C0BF calc(65% + 1px), #61C0BF 100%);

  // background-image:linear-gradient(to bottom,#0000,#0000,rgb(120,135,194,0.3));
  /* background-image: url(../../assets/guanwang.webp);//,linear-gradient(to bottom,#0000,#0000,rgb(120,135,194,0.2));
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%; */
}
.login-register{
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
  .contain{
		width: 60%;
		height: 60%;
		position: relative;
		top: 50%;
		left: 50%;
    border-radius:1.7rem 1.7rem;
		transform: translate(-50%,-50%);
    .big-box{
	  	width: 70%;
	  	height: 100%;
	  	position: absolute;
	  	top: 0;
	  	left: 30%;
	  	transition: all 1s;
      border-radius:0 1.7rem 1.7rem 0;
	  }
    .small-box{
	  	width: 30%;
	  	height: 100%;
	  	// background: linear-gradient(135deg,rgb(57,167,176),rgb(56,183,145));
      background: rgb(185,195,246,0.6);
      
	  	position: absolute;
	  	top: 0;
	  	left: 0;
	  	transform: translateX(0%);
	  	transition: all 1s;
	  	border-radius:1.7rem 0 0 1.7rem;
      .small-contain{
        
	    	width: 100%;
	    	height: 100%;
	    	display: flex;
	    	flex-direction: column;
	    	justify-content: center;
	    	align-items: center;
	    }
	    .stitle{
	    	font-size: 1.5em;
	    	font-weight: bold;
	    	color: #fff;
	    }
	    .scontent{
	    	font-size: 0.8em;
	    	color: #fff;
	    	text-align: center;
	    	padding: 2em 4em;
	    	line-height: 1.7em;
	    }
	    .sbutton{
	    	width: 60%;
	    	height: 40px;
	    	border-radius: 24px;
	    	border: 1px solid #fff;
	    	outline: none;
	    	background-color: transparent;
	    	color: #fff;
	    	font-size: 0.9em;
	    	cursor: pointer;
	    }
	  }
	  .big-box.active{
	  	left: 0;
	  	transition: all 0.5s;
      border-radius:1.7rem 0 0 1.7rem;
	  }
	  .small-box.active{
	  	left: 70%;
	  	border-radius:0 1.7rem 1.7rem 0;
	  	transition: all 1s;
	  }
	}
}

	
	
	
	
</style>